<template>
    <div>
        <div>
            <n-space>
                <n-button type="success" ghost @click="showModal = true">新增分类</n-button>
            </n-space>
            <n-modal v-model:show="showModal" :mask-closable="false" preset="dialog">
                <template #header>
                    <div>新增分类</div>
                </template>
                <div>
                    <n-input type="text" placeholder="请输入分类" clearable :allow-input="noSideSpace"
                        v-model="addCategory.name" />
                </div>
                <template #action>
                    <n-space>
                        <n-button type="success" @click="submitCategory">提交</n-button>
                    </n-space>
                </template>
            </n-modal>
        </div>
        <div>
            <n-data-table :columns="columns" :data="categoryList" :pagination="pagination" :bordered="false"
                :single-line="false" />
        </div>
    </div>
</template>

<script setup>
import { h, inject, onMounted, reactive, ref } from "vue";
import { NButton } from "naive-ui";
import { AdminStore } from "../stores/AdminStore";

const message = inject('message')
const axios = inject('axios')

const adminStore = AdminStore()

const showModal = ref(false); // 显示模态框
const addCategory = reactive({ name: "" }) // 要提交的分类名
const categoryList = reactive([]) // 存储获取的分类列表

// 挂载时
onMounted(() => {
    loadDatas() // 获取数据
})

// 操作按钮
const actionsArr = [
    {
        title: '修改',
        key: 'checkState',
        type: 'success'
    },
    {
        title: '删除',
        key: 'check',
        type: 'error'
    }
]
// 表格配置
const columns = [
    {
        title: "编号",
        key: "id",
        // defaultSortOrder: 'descend',
        sorter: 'default',
        align: 'center'
    },
    {
        title: "名称",
        key: "name",
        align: 'center'
    },
    {
        title: "操作",
        align: 'center',
        render(row) {
            const buttonGroup = actionsArr.map((item) => {
                return h(
                    NButton,
                    {
                        strong: true,
                        size: 'small',
                        type: item.type,
                        onClick: () => {
                            if (item.key === 'checkState') {
                                updateCategory(row)
                            } else {
                                deleteCategory(row)
                            }
                        }
                    },
                    { default: () => item.title }
                )
            })
            return h('span', { class: 'but-group-space-evenly' }, buttonGroup)
        }
    }
];
// 定义分页配置
const pagination = {
    pageSize: 5
};



const loadDatas = async () => {
    let res = await axios.get("/api/category/list")
    console.log(res.data._dbres);
    categoryList.push(...res.data._dbres)
}
console.log(categoryList);

// 点击操作按钮
// update
const updateCategory = (row) => {
    console.log(`修改 ${row.name}`);
    message.info(`修改 ${row.name}`)
};
// delete
const deleteCategory = (row) => {
    console.log(`删除 ${row.name}`);
    message.info(`删除 ${row.name}`)
};
// add 模态框
const submitCategory = async () => { // 提交
    let res = await axios.post('/api/category/_token/add', { name: addCategory.name }, { Headers: { token: adminStore.token } })
    message.success("提交");
    showModal.value = false;
    console.log(res);
}
// 模态框 输入框验证
const noSideSpace = (value) => !value.startsWith(" ") && !value.endsWith(" ")


</script>

<style lang="scss">
.but-group-space-evenly {
    display: flex;
    justify-content: space-evenly;
}
</style>

<style lang="scss">
body {
    padding: 0 20px;
}
</style>